<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.id" class="m-cost">
        <van-row>
          <van-col span="12" style="color: blue"> {{ item.cdate }}</van-col>
          <van-col span="12" style="color: green; font-weight: bold">
            小计：{{ item.sum }}</van-col
          >
        </van-row>
        <van-row>
          <van-col span="6"> 房租：{{ item.fz }}</van-col>
          <van-col span="6"> 物业：{{ item.wy }}</van-col>
          <van-col span="6"> 水电：{{ item.sd }}</van-col>
          <van-col span="6"> 宽带：{{ item.kd }}</van-col>
        </van-row>
        <van-row>
          <van-col span="6"> 管家：{{ item.gj }}</van-col>
          <van-col span="6"> 操作：{{ item.cz }}</van-col>
          <van-col span="6"> 其他：{{ item.qt }}</van-col>
          <van-col span="6"> 耗材：{{ item.hc }}</van-col>
        </van-row>
        <van-row>
          <van-col span="6"> 三方：{{ item.sf }}</van-col>
          <van-col span="6"> 流量：{{ item.ll }}</van-col>
          <van-col span="6"> 客情：{{ item.kq }}</van-col>
          <van-col span="6"> 运营：{{ item.yy }}</van-col>
        </van-row>
      </div>
    </van-list>
  </div>
</template>
<script>
import List from 'vant/lib/list'
import Cell from 'vant/lib/cell'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/cell/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import { mapGetters } from 'vuex'
import { getCostBySid } from '@/api/ym'

export default {
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  // created () {
  //   this.fetchData()
  // },
  methods: {
    onLoad () {
      this.loading = false
      getCostBySid(this.openId).then(res => {
        this.list = res.data.data
        this.list.forEach(cost => {
          cost.sum =
            cost.fz +
            cost.wy +
            cost.sd +
            cost.kd +
            cost.gj +
            cost.cz +
            cost.qt +
            cost.hc +
            cost.sf +
            cost.ll +
            cost.kq +
            cost.yy
        })
      })
      // this.list = [
      //   { cdate: '2024/02', sum: '9,888￥', lsp: 0, fz: '9,888￥', wy: '888￥', sd: '888￥', kd: '888￥' },
      //   { cdate: '2024/01', sum: '9,888￥', lsp: 1, fz: '9,888￥', wy: '888￥', sd: '888￥', kd: '888￥' }
      // ]
      this.finished = true
    }
  }
}
</script>
<style lang="scss" scoped>
.m-cost {
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  box-shadow: 0px 0px 5px rgb(201, 201, 201);
  margin-bottom: 3px;
}
</style>
